<template>
  <div class="holidayConfig">
    <div class="holidayleft">
      <div class="holidaycenter">
        <div class="title">节假日</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="holidayright">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="125px"
        label-position="right"
      >
        <el-form-item label="不服务时间配置：" prop="systemConfigHolidays">
          <div
            class="checkGroup"
            v-for="(item, index) in ruleForm.systemConfigHolidays"
            :key="index"
          >
            <el-select v-model="item.goodsType" placeholder="请选择">
              <el-option
                v-for="item in goodsTypeOption"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="item.festivalType"
              placeholder="请选择"
              class="te"
            >
              <el-option
                v-for="item in holidayOptions"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              >
              </el-option>
            </el-select>
            <span>前</span>
            <el-input
              v-model="item.beforeHoliday"
              placeholder=""
              class="shortinput"
            ></el-input>
            <span>天，至后</span>
            <el-input
              v-model="item.afterHoliday"
              placeholder=""
              class="shortinput"
            ></el-input>
            <span>天，不可服务</span>
            <el-button
              style="background-color:#fd804c;color: #fff;width:30px;height:30px;margin-left:5px;display: flex;
              justify-content: center;align-items: center;"
              icon="el-icon-plus"
              v-if="index === 0"
              @click="addItem"
            >
            </el-button>
            <el-button
              style="background-color:#fd804c;color: #fff;width:30px;height:30px;margin-left:5px;display: flex;
              justify-content: center;align-items: center;"
              icon="el-icon-minus"
              v-if="index != 0"
              @click="deleteItem(index)"
            >
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="holidayrightbehind">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
const goodsTypeOption = [
  {
    text: "单项商品",
    code: 0
  },
  {
    text: "保洁体验卡",
    code: 1
  },
  {
    text: "家务师体验卡",
    code: 2
  },
  {
    text: "保洁周期卡",
    code: 3
  },
  {
    text: "家务师周期卡",
    code: 4
  }
];
const holidayOptions = [
  {
    text: "春节",
    code: 0
  }
];
export default {
  props: ["systemConfigHolidays"],
  data() {
    return {
      goodsTypeOption,
      holidayOptions,
      ruleForm: {
        systemConfigHolidays: [
          {
            afterHoliday: "",
            beforeHoliday: "",
            configType: "system_config_holidays",
            festivalType: "",
            goodsType: ""
          }
        ]
      }
    };
  },
  methods: {
    addItem() {
      this.ruleForm.systemConfigHolidays.push({
        afterHoliday: "",
        beforeHoliday: "",
        configType: "system_config_holidays",
        festivalType: "",
        goodsType: ""
      });
    },
    deleteItem(index) {
      this.ruleForm.systemConfigHolidays.splice(index, 1);
    },
    async save() {
      const flag = this.validate();
      if (!flag) return;
      const data = {
        systemConfigHolidays: this.ruleForm.systemConfigHolidays
      };
      this.$http({
        url: "/hsssystemadmin/config/system/updateSystemConfig",
        method: "POST",
        data
      })
        .then(res => {
          this.$message.success("节假日基础配置成功");
          this.$emit("research");
        })
        .catch(err => {
          this.$message.error("系统繁忙，请稍后重试");
        });
    },
    validate() {
      let flag = true;
      this.ruleForm.systemConfigHolidays.forEach(item => {
        if (item.goodsType === "") {
          flag = false;
          this.$message.error("请选择商品类型");
          throw new Error("error");
        }
        if (item.festivalType === "") {
          flag = false;
          this.$message.error("请选择节假日类型");
          throw new Error("error");
        }
        const beforeHoliday = Number(item.beforeHoliday);
        const beforeHolidayStr = item.beforeHoliday + "";
        const reg = /^\d+$/;
        if (isNaN(beforeHoliday)) {
          flag = false;
          this.$message.error("天数请填写数字");
          throw new Error("error");
        }
        if (!reg.test(beforeHolidayStr)) {
          flag = false;
          this.$message.error("天数请填写数字");
          throw new Error("error");
        }
        const afterHoliday = Number(item.afterHoliday);
        const afterHolidayStr = item.afterHoliday + "";
        if (isNaN(afterHoliday)) {
          flag = false;
          this.$message.error("天数请填写数字");
          throw new Error("error");
        }
        if (!reg.test(afterHolidayStr)) {
          flag = false;
          this.$message.error("天数请填写数字");
          throw new Error("error");
        }
      });
      let holidayGoodsTypes = [];
      this.ruleForm.systemConfigHolidays.forEach(item => {
        holidayGoodsTypes.push(item.goodsType);
      });
      const newHolidayGoodsTypes = Array.from(new Set(holidayGoodsTypes));
      if (newHolidayGoodsTypes.length < holidayGoodsTypes.length) {
        this.$message.error("节假日不能配置重复");
        flag = false;
      }
      return flag;
    }
  },
  watch: {
    systemConfigHolidays(newvalue) {
      if (newvalue && newvalue.length != 0) {
        this.ruleForm.systemConfigHolidays = newvalue;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.holidayConfig {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .holidayleft {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .holidaycenter {
      width: 100px;
      height: 70px;
      .title {
        width: 100%;
        height: 35px;
        background-color: #f56a23;
        font-size: 22px;
        color: #fff;
        line-height: 35px;
        text-align: center;
      }
      .baseconfig {
        width: 100%;
        height: 35px;
        font-size: 22px;
        line-height: 35px;
        text-align: center;
        color: #aaa;
      }
    }
  }
  .holidayright {
    background-color: #fff;
    min-height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    /deep/ .el-form-item__label {
      font-size: 12px;
    }
    .checkGroup {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-size: 12px;
      span {
        display: block;
        height: 30px;
      }
    }
    .checkGroup .el-select {
      display: block;
      width: 120px;
      height: 30px;
      margin-right: 5px;
      margin-left: 5px;
      /deep/ .el-input {
        height: 30px;
        line-height: 30px;
      }
      /deep/ .el-input__inner {
        font-size: 12px;
        height: 30px;
      }
      /deep/ .el-icon-arrow-up {
        line-height: 30px;
      }
    }
    .checkGroup .el-select.te {
      width: 80px;
    }
  }
  .holidayrightbehind {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .save {
      width: 70px;
      height: 40px;
      font-size: 22px;
      color: #fff;
      background-color: #00cb75;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
/deep/ .shortinput.el-input {
  width: 60px;
  height: 30px;
  box-sizing: border-box;
  .el-input__inner {
    width: 60px;
    height: 30px;
  }
}
</style>
